<template>
  <div>

    <!-- <router-link to="home/hotel">宿舍管理</router-link>
    <router-link to="home/student">学生管理</router-link>
    <router-link to="home/notice">公告主页</router-link>
    <router-link to="home/admin">管理员管理</router-link> -->

    <el-container>
      <el-header>
        <i class="iconfont icon-fenlei"></i>
        <span>宿舍管理系统</span>
        <!-- <el-dropdown trigger="click"> -->
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            {{getUser}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-plus" @click.native="quitLogin()">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-row class="tac">
            <el-col :span="12">
              <el-menu ref="menu" :default-active="$route.path" router class="el-menu-vertical-demo" @open="handleOpen"
                @close="handleClose">
                <el-menu-item index="/home/shownotice">
                  <i class="iconfont icon-gonggao"></i>
                  <span>公告主页</span>
                </el-menu-item>
                <el-menu-item index="/home/hotel">
                  <i class="iconfont icon-sushe"></i>
                  <span>宿舍管理</span>
                </el-menu-item>
                <el-menu-item index="/home/student">
                  <i class="iconfont icon-xueshengguanli"></i>
                  <span>学生管理</span>
                </el-menu-item>
                <el-menu-item index="/home/notice">
                  <i class="iconfont icon-baoming"></i>
                  <span>公告管理</span>
                </el-menu-item>
                <el-menu-item index="/home/admin">
                  <i class="iconfont icon-guanliyuan"></i>
                  <span>管理员管理</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <el-breadcrumb separator-class="el-icon-arrow-right" separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(item,index) in $route.meta.title" :key="index">{{item}}</el-breadcrumb-item>
          </el-breadcrumb>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>
<script>
import Cookies from 'js-cookie';
export default {
  data () {
    return {
    }
  },

  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath);
    },
    quitLogin () {
      console.log("abc")
      // var params = new URLSearchParams()
      localStorage.clear();
      sessionStorage.clear();
      this.$router.push("/login");
      // this.$axios.post('/logOut', params).then(res => {
      //   if (res.data.code == 200) {
      //     console.log(res);
      //     console.log(123)
      //     this.$message.success('退出成功')

      //   } else {
      //     console.log(234)
      //   }
      // })
    },
  },
  computed: {
    getUser () {
      return sessionStorage.getItem("username");
    },
  },
  mounted () {

  },
  watch: {
    $route () {
      // 页面刷新路由不失去焦点
      let i = this.$route.path
      setTimeout(() => {
        this.$refs.menu.activeIndex = i
      }, 100);
    }
  },
  beforeMount () {
  },
}
</script>
<style scoped>
.el-container {
  height: 100%;
}
.el-header {
  position: relative;
  height: 80px !important;
  line-height: 80px;
  background: #4985fb;
}
.el-header span,
.el-header i {
  color: #fff;
  margin-left: 20px !important;
  font-size: 20px;
}
::v-deep .el-dropdown-link {
  position: absolute;
  right: 20px;
}
::v-deep .el-dropdown {
  position: absolute;
  right: 40px;
  width: 150px;
  height: 80px;
}
::v-deep .el-dropdown .el-dropdown-link {
  font-size: 15px;
}
::v-deep .el-dropdown .el-dropdown-link {
  font-size: 16px;
  font-weight: bold;
}
::v-deep .el-dropdown .el-dropdown-link i {
  margin-left: 2px !important;
}
.el-dropdown-menu {
  position: absolute;
  top: 60px !important;
  left: 1782px !important;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
#app
  div[data-v-fae5bece]
  .is-vertical
  .el-container
  .el-aside[data-v-fae5bece] {
  width: 4.5rem !important;
}

#app
  div[data-v-fae5bece]
  .is-vertical
  .el-container
  .el-aside[data-v-fae5bece]
  .tac
  .el-col {
  width: 100%;
}
#app
  div[data-v-fae5bece]
  .is-vertical
  .el-container
  .el-aside[data-v-fae5bece]
  .tac
  .el-col
  i {
  margin-left: 50px !important;
  margin-right: 10px !important;
  color: #666;
}
#app
  div[data-v-fae5bece]
  .is-vertical
  .el-container
  .el-aside[data-v-fae5bece]
  .tac
  .el-col
  ul
  li {
  width: 100%;
}
::v-deep .el-container .el-aside {
  border-right: 1px solid #eee;
}
::v-deep .el-container .tac .el-col .el-menu {
  border: none;
}
::v-deep .el-breadcrumb {
  padding-left: 20px !important;
}
#app
  div[data-v-fae5bece]
  .is-vertical
  .el-container
  .el-aside[data-v-fae5bece]
  .tac
  .el-col
  ul
  li
  span {
  color: #666;
}
div[data-v-fae5bece]
  .is-vertical
  .el-container
  .el-aside[data-v-fae5bece]
  .tac
  .el-col
  ul
  li
  a {
  text-decoration: none;
}
#app
  div[data-v-fae5bece]
  .is-vertical
  .el-container
  .el-aside[data-v-fae5bece]
  .tac
  .el-col
  ul
  .is-active
  span,
#app
  div[data-v-fae5bece]
  .is-vertical
  .el-container
  .el-aside[data-v-fae5bece]
  .tac
  .el-col
  ul
  .is-active
  i {
  color: #4985fb;
}

.el-container .el-main {
  padding: 20px !important;
  /* background: lightseagreen; */
}
#app div[data-v-fae5bece] .is-vertical .el-container .el-main .el-breadcrumb {
  margin-bottom: 10px !important;
  background: #eee;
  height: 30px;
  line-height: 30px;
}
/* .test {
  width: 100px;
  height: 100px;
  background: #409eff;
} */
</style>
